<template>
  <div>
    <el-collapse v-model="activeCollapse" accordion style="position:relative;height:300px;overflow-y: auto;">
      <el-collapse-item v-for="(i,index) in collapseList" :key="index" :name="index+1">
        <template slot="title">
          <i class="el-icon-caret-bottom arrowUp"  v-if="activeCollapse == index+1"> </i>
          <i class="el-icon-caret-right arrowDown" v-else></i>
          <div class="title">
            <div>{{i.title}}</div>
            <div>{{i.name}}</div>
            <div>{{i.phone}}</div>
          </div>
        </template>
        <el-table
          :data="i.tableData"
          :span-method="objectSpanMethod"
          border
          center
          style="width: 100%; margin-top: 20px"
        >
        <el-table-column key="id" align="center" prop="id" label="ID" width="180"> </el-table-column>
        <el-table-column key="name" prop="name" label="姓名"> </el-table-column>
        <el-table-column key="amount1" prop="amount1" label="数值 1（元）"> </el-table-column>
        <el-table-column key="amount2" prop="amount2" label="数值 2（元）"> </el-table-column>
        <el-table-column key="amount3" prop="amount3" label="数值 3（元）"> </el-table-column>
        </el-table>
      </el-collapse-item>
    </el-collapse>
    <el-select :disabled="loading" v-model="value1" multiple placeholder="请选择">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
    <el-button @click="search" :disabled="loading">搜索</el-button>
  </div>
</template>

<script>
export default {
  name: "elTableMergeColumn",
  data() {
    return {
      loading:false,
      activeCollapse:'',
      value1: [],
      collapseList:[
        {
          title:'大洼区水利局南河',
          name:'王明明',
          phone:'18812428462',
          tableData: [
            {
              id: "12987122",
              name: "王小虎",
              amount1: "234",
              amount2: "3.2",
              amount3: 10,
              num:2,
            },
            {
              id: "12987123",
              name: "王小虎",
              amount1: "165",
              amount2: "4.43",
              amount3: 12,
              num:0,

            },
            {
              id: "12987124",
              name: "王小虎",
              amount1: "324",
              amount2: "1.9",
              amount3: 9,
              num:1,

            },
            {
              id: "12987125",
              name: "王小虎",
              amount1: "621",
              amount2: "2.2",
              amount3: 17,
              num:1,

            },
            {
              id: "12987126",
              name: "王小虎",
              amount1: "539",
              amount2: "4.1",
              amount3: 15,
              num:1,

            },
          ]
        },
        {
          title:'大洼区水利局南河',
          name:'王明明',
          phone:'18812428462',
          tableData: [
            {
              id: "12987122",
              name: "王小虎",
              amount1: "234",
              amount2: "3.2",
              amount3: 10,
              num:1,
            },
            {
              id: "12987123",
              name: "王小虎",
              amount1: "165",
              amount2: "4.43",
              amount3: 12,
              num:2,

            },
            {
              id: "12987124",
              name: "王小虎",
              amount1: "324",
              amount2: "1.9",
              amount3: 9,
              num:0,

            },
            {
              id: "12987125",
              name: "王小虎",
              amount1: "621",
              amount2: "2.2",
              amount3: 17,
              num:1,

            },
            {
              id: "12987126",
              name: "王小虎",
              amount1: "539",
              amount2: "4.1",
              amount3: 15,
              num:1,

            },
          ]
        },
        {
          title:'大洼区水利局南河',
          name:'王明明',
          phone:'18812428462',
          tableData: [
            {
              id: "12987122",
              name: "王小虎",
              amount1: "234",
              amount2: "3.2",
              amount3: 10,
              num:1,
            },
            {
              id: "12987123",
              name: "王小虎",
              amount1: "165",
              amount2: "4.43",
              amount3: 12,
              num:1,

            },
            {
              id: "12987124",
              name: "王小虎",
              amount1: "324",
              amount2: "1.9",
              amount3: 9,
              num:3,

            },
            {
              id: "12987125",
              name: "王小虎",
              amount1: "621",
              amount2: "2.2",
              amount3: 17,
              num:0,

            },
            {
              id: "12987126",
              name: "王小虎",
              amount1: "539",
              amount2: "4.1",
              amount3: 15,
              num:0,

            },
          ]
        },
      ],
      options: [{
          value: '1',
          label: '黄金糕'
        }, {
          value: '2',
          label: '双皮奶'
        }, {
          value: '3',
          label: '蚵仔煎'
        }, {
          value: '4',
          label: '龙须面'
        }, {
          value: '5',
          label: '北京烤鸭'
        }],
      
    };
  },

  methods: {
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        return {
          rowspan:row.num,
          colspan: 1
        }
      }
    },
    search(){
      this.loading = true
      console.log(this.value1)
      setTimeout(()=>{
      this.loading = false
      },1000)
    }
  },

  watch: {},
  computed: {},

  created() {},
  mounted() {},
  beforeDestroy() {},
};
</script>

<style scoped lang="less">
.title{
  display: flex;
  padding-left: 20px;
  div{
    margin-left: 10px;
  }
}
/deep/ .el-collapse-item__arrow {
  display: none;
}
/deep/ .el-icon-caret-bottom , /deep/ .el-icon-caret-right{
  transform: translateX(10px);
}
/deep/ .el-collapse-item>:first-child{
  position: sticky;
  top: 0;
  z-index: 800;
}
</style>